<%-- 
    Document   : BrowseSongByTitle
    Created on : Jun 7, 2012, 8:13:19 AM
    Author     : Student
--%>


<%@tag description="put the tag description here" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/style/style.css" />

<script  src="${pageContext.request.contextPath}/js/qaEffect.js"></script>
<script src="${pageContext.request.contextPath}/js/flexiblelist.js"></script>


<%-- The list of normal or fragment attributes can be specified here: --%>
<%@attribute name="message"%>
<jsp:useBean id="dao" scope="page" class="connection.DaoSong"/>
<%@attribute name="account" required="true" type="model.Account"%>
<jsp:setProperty name="dao" property="accountId" value="${account.userID}"/>

<%-- any content can be specified here e.g.: --%>

<script type="text/javascript">
    function searchit(){
        var keyword = document.getElementById('searchbar').value;
        for(var i=0;i<document.getElementById('searching').length;i++){
            if(document.getElementsByName("titleS")[i].className == 'titleS'){
                if(document.getElementsByName("titleS")[i].innerHTML.toLowerCase().indexOf(keyword.toLowerCase()) == -1){
                    document.getElementsByName("titleS")[i].style.height = '0px';
                }
                else{
                    document.getElementsByName("titleS")[i].style.height = '20px';
                }
            } 
        }
    }
</script>


<div id="itunewindow">

    <div id ="songlist" > 
        <input class="search" />
        <span class="sort" data-sort="question_slide" > Search Song </span>
        <ol class="list">

            <c:forEach items="${dao.getSongByShopping()}" var="song">
                <li class ="songdetail" >      

                    <div class="question_slide" > 
                        <span class="tracktitle">
                            ${song.title}
                        </span>
                    </div> 

                    <c:url value="/BuySongController" var="urlBuy">
                        <c:param name="songId" value="${song.songId}"/>
                    </c:url>

                    <table style="width: 100%; ">

                        <tr>
                            <td style="width: 5%"></td>

                            <td style="width: 70%">


                            </td>
                        </tr>
                    </table>


                    <div class="answer"> 
                        <div id="searching"> 

                            <br/>
                            <table>
                                <tr>
                                    <td style="width: 10%;" > </td>
                                    <td style="width: 30%;">
                                        <img class="songcover" src="${song.imageLocation}"  />
                                    </td>
                                    <td style="width: 10%;" > </td>
                                    <td>
                                        <table>
                                            <tr>
                                                <td>
                                                    <img src="${pageContext.request.contextPath}/images/artist.jpg" 
                                                         height="20px" width="20px" /> ${song.artist} 
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <img src="${pageContext.request.contextPath}/images/album.jpg" 
                                                         height="20px" width="20px" /> ${song.album} 
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <img src="${pageContext.request.contextPath}/images/genre.jpg" 
                                                         height="20px" width="20px" /> ${song.genre} 
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <img src="${pageContext.request.contextPath}/images/rating.jpg" 
                                                         height="20px" width="20px" /> ${song.rating} 
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <img src="${pageContext.request.contextPath}/images/dateReleased.jpg" 
                                                         height="20px" width="20px" /> ${song.dateReleased} 
                                                </td>
                                            </tr>
                                            <tr>
                                                <td style="font-size: 30px;">
                                                    <img src="${pageContext.request.contextPath}/images/price.jpg" 
                                                         height="40px" width="40px" />   ${song.price} 
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <c:url value="/ViewLyricsController" var="urlLyrics">
                                                        <c:param name="songId" value="${song.songId}"/>
                                                    </c:url>   
                                                    <a href="${urlLyrics}">View Lyrics </a> 
                                                </td>
                                            </tr>
                                        </table>

                                    </td>

                                </tr>


                            </table>

                            <c:if test="${song.reviewed eq 'false'}">
                                <form method="POST" action="${pageContext.request.contextPath}/RateSongController">

                                    <input type="hidden" name="rateSongId" value="${song.songId}"/>

                                    Review this song <br/><textarea name="taReview"  rows="10" cols="60" lang="html" >
                                    </textarea>

                                    <select name="ddlRating">
                                        <option value="1">1</option>
                                        <option value="2">2</option>
                                        <option value="3">3</option>
                                        <option value="4">4</option>
                                        <option value="5">5</option>
                                        <option value="6">6</option>
                                        <option value="7">7</option>
                                        <option value="8">8</option>
                                        <option value="9">9</option>
                                        <option value="10">10</option>
                                    </select>



                                    <br/>
                                    <input type="hidden" value="${account.userID}" name="userId"/>
                                    <input type="submit" value="Review and Rate" name="btnRate" > 


                                </form>
                            </c:if>              
                            <c:if test="${song.reviewed eq 'true'}">
                                Song already reviewed.
                            </c:if>


                            <br/>


                        </div> 
                    </div> 
                </li>
            </c:forEach>
        </ol>
    </div>
</div>

<script type="text/javascript"> 
    initShowHideDivs();
    // showHideContent(true,-1);	// Automatically expand first item
   
    var slideSpeed =10;	// Higher value = faster
    var timer = 10;	// Lower value = faster
    var expandMultiple = true;
        
    var options = {
        valueNames: [ 'tracktitle' ]
    };

    var featureList = new List('songlist', options);
        
        
        
        
    window.onload = function() { 
        var s = document.getElementById("mySelect");
        s.selectedIndex = s.options.length - 1;

    };
          
        
</script>   